<script setup>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

import config from '@/utils/GlobalConfig'
import {onMounted, ref} from "vue";
import TitleBar from "@/components/TitleBar.vue";
import MapDisplay from "@/components/MapDisplay.vue";


// 初始化地图
let mapInit=ref(false)

function initMap(){
  let corner1=L.latLng(90,0) //左上
  let corner2=L.latLng(-90,360) //右下
  let bounds=L.latLngBounds(corner1,corner2)

  config.map = L.map('map', {
    center: [25.8 ,115.3],
    zoom: 9,
    minZoom: 3,
    maxZoom: 16,
    zoomControl: false, //禁用 + — 按钮
    attributionControl: false,  //右下角leaflet标识
    maxBounds:bounds
  })
  mapInit.value=true
}

onMounted(()=>{
  initMap()
})
</script>

<template>
  <title-bar></title-bar>

  <div id="map"></div>
<!--  地图功能组件-->
  <MapDisplay v-if="mapInit"></MapDisplay>

</template>

<style scoped>

#map{
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
</style>